<template>
	<div class="container">
		<div class="position-relative">

      <div>
        <p></p>
        <h1>{{(ifshow? content.course.name:'') }}</h1>
        <h8>{{(ifshow? content.course.summary:'') }}</h8>
      </div>

			<ul class="nav nav-tabs mb-3">
				<li class="nav-item">
					<a class="nav-link" href="#" :class="ifshow?(content.orderMode==0?'active':''):''" v-on:click="list(1)">最新</a><!--:class="(content.orderMode==1?'active':'')"-->
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#" :class="ifshow?(content.orderMode==1?'active':''):''" v-on:click="list(1)">最热</a>
				</li>
			</ul>

			<button type="button" class="btn btn-primary btn-sm position-absolute rt-0" data-toggle="modal" data-target="#publishModal">
        我要发布
      </button>
      <button class="btn btn-primary btn-sm position-absolute rt-0" style="right: 100px">
<!--        <a href="/discusspost-content">我要发布2</a>-->
        <router-link v-bind:to="'/discusspost-content?id='+(ifshow ? content.course.id:'')" class="btn btn-outline-secondary">我要发布2</router-link>

      </button>

      <div class="position-absolute  rt-0 form-inline my-2 my-lg-0" style="right: 300px">
        <input class="form-control mr-sm-2" />
        <button @click="Allserch()" class="btn my-2 my-sm-0">搜索</button>
      </div>

		</div>
		<!-- 弹出框 -->
		<div class="modal fade" id="publishModal" tabindex="-1" role="dialog" aria-labelledby="publishModalLabel" aria-hidden="true">
			<div class="modal-dialog modal-lg" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="publishModalLabel">新帖发布</h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
					</div>
					<div class="modal-body">
						<form>
							<div class="form-group">
								<label for="recipient-name" class="col-form-label">标题：</label>
								<input type="text" v-model="postTitle" class="form-control" id="recipient-name">
							</div>
							<div class="form-group">
								<label for="message-text" class="col-form-label">正文：</label>
								<textarea v-model="postContent" class="form-control" id="message-text" rows="15"></textarea>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
						<button type="button" @click="publish(content.course.id)" class="btn btn-primary" id="publishBtn">发布</button>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 帖子列表 -->
		<ul class="list-unstyled">
			<li class="media pb-3 pt-3 mb-3 border-bottom" v-for="(item,i) in (ifshow?content.pageDto.list:'')" :key="i">
				<a :href="'/profile/'+item.user.id">
					<img :src="item.user.photo" class="mr-4 rounded-circle" alt="用户头像" style="width:50px;height:50px;">
				</a>
				<div class="media-body">
					<h6 class="mt-0 mb-3">
						<a :href="'/discussdetail/'+item.discussPost.id">{{item.discussPost.title}}</a>
						<span class="badge badge-secondary bg-primary">{{item.discussPost.type===1?'置顶':''}}</span>
						<span class="badge badge-secondary bg-danger">{{item.discussPost.status===1?'精华':''}}</span>
					</h6>
					<div class="text-muted font-size-12">
            			<a :href = " '/profile/' + item.user.id " >
							<u class="mr-3">{{item.user.username}}</u>
						</a> 发布于 <b>{{item.discussPost.createTime |datatime}}</b>
						<ul class="d-inline float-right">
							<li class="d-inline ml-2">赞 {{item.likeCount}}</li>
							<li class="d-inline ml-2">|</li>
							<li class="d-inline ml-2">回帖 {{item.discussPost.commentCount}}</li>
						</ul>
					</div>
				</div>						
			</li>
		</ul>
		<!-- 分页 -->
    <pagination ref="pagination" v-bind:list="list" v-bind:itemCount="8"></pagination><!-- @pageClick = 'pageClickHandle($event)' -->
	</div>
</template>

<script>
import Pagination from "@/components/pagination";
export default {
  components: {Pagination},
    name:'newindex',
	data(){
		return{
        id: "",
		 		content:null,
				postTitle:'', //标题
				postContent:'', //内容
				ifshow:false,
        orderMode:0,
			}
	},
  //监听某个变量的值有变化
  watch:{
    content(){
      this.setIfshow();
    }
  },
  created(){
    this.setIfshow();
  },
  mounted(){
    let _this = this;
    _this.id = _this.$route.query.id;
    //_this.$refs.pagination.size = 1;
    this.list(1);
	},
	methods:{
/*    pageClickHandle(page){
      this.list(this.id,page,0);
    },*/
    list(page) {
			let _this = this;
			_this.$ajax.post(process.env.VUE_APP_SERVER + '/business/web/course_discusspost?orderMode=' + _this.orderMode + '&courseId=' + _this.id, {
				page: page,
				size: _this.$refs.pagination.size,
			}).then((response)=>{
				console.log("查询帖子列表结果：", response);
				_this.content = response.data.content;
				_this.$refs.pagination.render(page, response.data.content.pageDto.total);

			})
		},
    //发布帖子
    publish(courseId){
      let _this = this;
      $("#publishModal").modal("hide");

      _this.$ajax.post(process.env.VUE_APP_SERVER + "/business/web/discuss/add", {
        title: _this.postTitle,
        content: _this.postContent,
        courseId:courseId,
      }).then((response)=>{
        if(response.data.success){
          Toast.success("发布成功");
          _this.postTitle="";
          _this.postContent="";
          _this.list(_this.id,1,0);
        }
      })
    },

    setIfshow(){
      if(this.content != null){
        this.ifshow = true;
      }else{
        this.ifshow = false;
      }
    },
	},

}
</script>

<style lang="scss" scoped>
    @import '@/assets/style/css/global.scss';
</style>